<template>
  <view class="address-panel">
    <view class="title">
      <view class=""></view>
      <view class="name">配送至</view>
      <view class="close icon-close" @tap="onTab"></view>
    </view>

    <!-- 内容 -->
    <view class="content">
      <view class="item">
        <view class="user">李明 13824686868</view>
        <view class="address">北京市顺义区后沙峪地区安平北街6号院</view>
        <text class="icon icon-checked"></text>
      </view>
      <view class="item">
        <view class="user">王东 13824686868</view>
        <view class="address">北京市顺义区后沙峪地区安平北街6号院</view>
        <text class="icon icon-ring"></text>
      </view>
      <view class="item">
        <view class="user">张三 13824686868</view>
        <view class="address">北京市朝阳区孙河安平北街6号院</view>
        <text class="icon icon-ring"></text>
      </view>
    </view>

    <view class="footer">
      <view class="button primary"> 新建地址 </view>
      <view v-if="false" class="button primary">确定</view>
    </view>
  </view>
</template>

<script setup lang="ts">
const emit = defineEmits<{
  (event: 'close'): void
}>()

const onTab = () => {
  emit('close')
}
</script>

<style lang="scss" scoped>
.address-panel {
  padding: 20rpx;

  .title {
    display: flex;
    justify-content: space-between;
    border-bottom: 1rpx solid #ccc;

    .name {
      padding: 20rpx;
      font-size: 35rpx;
      line-height: 1em;
    }

    .close {
      font-size: 35rpx;
      padding-right: 10rpx;
    }
  }

  .content {
    margin-top: 20rpx;
    padding-bottom: 50rpx;

    .item {
      padding: 30rpx 50rpx 30rpx 60rpx;
      background-size: 40rpx;
      background-repeat: no-repeat;
      background-position: 0 center;
      background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png);
      position: relative;

      .icon {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
        font-size: 40rpx;
      }

      .icon-checked {
        color: #27ba9b;
      }

      .user {
        font-size: 28rpx;
        color: #444;
        font-weight: 500;
      }

      .address {
        font-size: 26rpx;
        color: #666;
      }
    }
  }

  .footer {
    // padding: 20rpx 0 40rpx;
    font-size: 28rpx;
    color: #444;
    .button {
      height: 72rpx;
      text-align: center;
      line-height: 72rpx;
      margin: 0 20rpx;
      color: #fff;
      background-color: #27ba9b;
      border-radius: 72rpx;
    }
    .secondary {
      background-color: #ffa868;
    }
  }
}
</style>
